<template>
    <div class="qilin-QilinCollapse">
        <el-collapse
            :accordion="ownCollapseConfig?.elCollapseConfig?.accordion ?? true"
        >
            <template
                v-for="(item,index) in ownCollapseConfig.itemConfig"
                :key="item.id || 'collapse-key-'+index "
            >
                <el-collapse-item>
                    <template v-slot:title>
                        <span></span>
                        <span>{{item.text}}</span>
                        <span>{{item.expression}}</span>
                    </template>
                    <div>{{item.subText}}</div>
                    <div v-if="!!item.description">{{item.description}}</div>
                    <slot name="code" :data="item.codeValue"></slot>
                </el-collapse-item>
            </template>
        </el-collapse>
    </div>
</template>

<script setup>

/*
    数据变量定义区域
*/
// 接收父组件传来的值--父组件定义的配置项建议放在脚本逻辑最下方
const propsValue=defineProps({
    collapseConfig:{
        type:Object,
        default(){
            return {
                elCollapseConfig:{ //el-collapse标签上的属性配置
                    accordion:true, //是否开启手提琴模式
                },
                itemConfig:[ //el-collapse-item标签配置

                ]
            };
        }
    }
});
// 暴露父组件自定义方法
const emits=defineEmits(["update:collapseConfig"]);


/*
    计算属性等代码区域
*/
const ownCollapseConfig=computed({
    get(){
        return propsValue.collapseConfig;
    },
    set(val){
        emits("update:collapseConfig",val);
    }
});


/*
    逻辑脚本代码区域
*/


/*
    生命周期代码区域
*/

</script>

<style lang="scss" scoped>
.qilin-QilinCollapse{
    >.el-collapse{
        :deep(.el-collapse-item__header){
            font-size:$size-text-default !important;
            padding: $rem5 0;
            cursor: pointer;
            > span:nth-of-type(1) {
                @include QilinWidthHeight($rem5,$rem5);
                display: inline-block;
                border-radius: $radius-circle;
                background-color: $color-text-title;
                vertical-align: middle;
                margin: $rem5 $rem5 $rem10 $rem5;
            }
            > span:nth-of-type(2) {
                color: $color-text-title;
                font-weight: bold;
            }
            > span:nth-of-type(3) {
                color: $color-text-common;
            }
        }
    }
}
</style>
